<template>
    <div class="home">
        <van-nav-bar class="home-nav" title="" fixed>
            <template #left>
                <div class="left-content">
                    <span>同志你好</span>
                </div>
            </template>
            <template #right>
                <van-search placeholder="请输入搜索关键词" @focus="golink('Search')" />
            </template>
        </van-nav-bar>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ffff">
            <van-swipe-item class="swipe-item" v-for="(item,index) in bannerData" :key="index"
                @click="goDetail(item.pid)">
                <img v-lazy="item.bannerImg" class="swipe-item-img">
            </van-swipe-item>
        </van-swipe>
        <div class="hot-title">热门推荐</div>

        <div class="hot-content">
            <div class="hot-card" v-for="(item,index) in hotProduct" ::key="index" @click="goDetail(item.pid)">
                <img :src="item.smallImg" alt="item.name">
                <p class="hot-card-name">{{item.name}}</p>
                <p class="hot-card-price">￥:{{item.price}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import '../assets/scss/Home.scss'
    export default {
        name: 'Home',
        data() {
            return {
                imgsdata: [],
                images: [
                    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg',
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg',
                    'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3238317745,514710292&fm=26&gp=0.jpg',
                ],
                // 测试图片
                txtimg: [
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1093553954,1638924774&fm=26&gp=0.jpg',
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1093553954,1638924774&fm=26&gp=0.jpg',
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1093553954,1638924774&fm=26&gp=0.jpg'
                ],
                //轮播数据
                bannerData: [],
                hotProduct: []
            }
        },
        created() {
            this.getBannerData();
            this.getHotProduct();
        },
        methods: {
            //获取轮播图数据
            getBannerData() {
                this.$toast.loading({
                    message: "加载中...",
                    forbidClick: true,
                    duration: 0,
                });

                //发起注册请求
                this.axios({
                        //请求类型
                        method: "GET",
                        //请求路径
                        url: "/banner",

                        //GET请求参数, object
                        params: {
                            appkey: this.appkey,
                        },
                    })
                    .then((result) => {
                        this.$toast.clear();

                        console.log("banner result ==> ", result);

                        if (result.data.code == 300) {
                            this.bannerData = result.data.result;
                        }
                    })
                    .catch((err) => {
                        this.$toast.clear();

                        console.log("err ==> ", err);
                    });
            },

            //获取热卖推荐商品
            getHotProduct() {
                this.$toast.loading({
                    message: "加载中...",
                    forbidClick: true,
                    duration: 0,
                });

                //发起注册请求
                this.axios({
                        //请求类型
                        method: "GET",
                        //请求路径
                        url: "/typeProducts",

                        //GET请求参数, object
                        params: {
                            appkey: this.appkey,
                            key: 'isHot',
                            value: 1
                        },
                    })
                    .then((result) => {
                        this.$toast.clear();

                        console.log("hotresult ==> ", result);

                        if (result.data.code == 500) {
                            this.hotProduct = result.data.result;
                        }
                    })
                    .catch((err) => {
                        this.$toast.clear();

                        console.log("err ==> ", err);
                    });
            },

            // 跳转到商品详情页面
            //查看商品详情页面
            goDetail(pid) {
                console.log('goggo');
                this.$router.push({
                    name: 'Detail',
                    params: {
                        pid
                    }
                });
            },
            golink(name) {
                this.$router.push({
                    name
                });
            },
        },
    }
</script>
<style lang="less">

</style>